<template>
	<view class="connect">
		<view class="title flex-center">
			连接{{title}} API
		</view>
		<form @submit="submitForm">
			<view class="list flex">
				<view class="h3">PASSPHRASE</view>
				<input type="text" placeholder="请输入您的Passphrase" name="passphrase">
			</view>
			<view class="list flex">
				<view class="h3">API KEY</view>
				<input type="text" placeholder="请输入您的Api Key" name="api">
			</view>
			<view class="list flex">
				<view class="h3">SECRET KEY</view>
				<input type="text" placeholder="请输入您的Secret Key" name="secret">
			</view>
			<button class="flex-center" form-type="submit">连接</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:''
			};
		},
		onLoad(options) {
			this.title = options.title;
			uni.setNavigationBarTitle({
				title:options.title
			})
		},
		methods:{
			submitForm(e){
				console.log(e.detail.value)
			}
		}
	}
</script>

<style lang="less">
	page{
		background: white;
	}
	@color:#d4237a;
	.connect{
		padding: 30rpx;
		.title{
			margin: 100rpx 0;
			font-size: 60rpx;
		}
		.list{
			border-bottom: 2rpx solid #ddd;
			.h3{
				width:200rpx ;
				font-size: 26rpx;
				font-weight: bold;
			}
			input{
				font-size: 26rpx;
				height: 100rpx;
			}
		}
		button{
			margin: 100rpx;
			background:@color ;
			color:white;
			border-radius: 50rpx;
		}
	}
</style>
